<template>
  <el-form label-position="right" label-width="100px">
    <el-row :gutter="40">

      <el-col :span="24">
        <item-title title="配送产品信息" />
      </el-col>

      <el-col :span="24">
        <el-form-item label="产品信息：">
          {{ getProductName(formData) }}
        </el-form-item>
      </el-col>

      <el-col :span="8">
        <el-form-item label="代理名称：" style="width:100%">
          <toolTip :title="formData?.agentName" />
        </el-form-item>
      </el-col>
      <!-- <el-col :span="8">
        <el-form-item label="代理协议："></el-form-item>
      </el-col> -->
      <el-col :span="8">
        <el-form-item label="可销售区域：">
          <area-list-view :areas="formData?.region" />
        </el-form-item>
      </el-col>

      <el-col :span="8">
        <el-form-item label="配送模式：">
          {{ getLabel('distributor_mode', formData?.rddType) }}
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="配送商名称：" style="width:100%">
          <toolTip :title="formData?.distribute?.distributeName" />
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="配送费：">
          {{ formData?.distribute_detail?.distributePrice }}
          <span v-if="formData?.distribute_detail?.computeMode === '固定价格'">
            <span v-if="formData?.sellUnit">元/{{ getLabel('sell_unit', formData?.sellUnit) }}</span>
          </span>
          <span v-if="formData?.distribute_detail?.computeMode === '终端价百分比'">
            %终端价
          </span>

        </el-form-item>
      </el-col>

      <el-col :span="8">
        <el-form-item label="负责营销职员：" label-width="110px">
          {{ formData?.headName }}
        </el-form-item>
      </el-col>

      <template v-if="formData?.terminals && formData?.terminals.length > 0">
        <el-col :span="24">
          <item-title title="配送终端列表" />
        </el-col>

        <el-col :span="24">
          <el-table :data="formData?.terminals" border header-cell-class-name="table-header" size="small">

            <el-table-column align="center" label="序号" type="index" width="50" />

            <el-table-column header-align="center" label="终端名称" prop="terminalName" />

            <el-table-column header-align="center" label="所在地区">
              <template #default="{row}">
                {{ row.provinceName }}/{{ row.cityName }}/{{ row.areaName }}
              </template>
            </el-table-column>

            <el-table-column align="center" label="终端类型">
              <template #default="{row}">
                {{ getLabel('app_mode', row.terminalType) }}
              </template>
            </el-table-column>

            <el-table-column align="center" label="终端价" prop="terminalPrice">
              <template #default="{row}">
                {{ row.terminalPrice }}
                <span v-if="formData?.sellUnit">
                  元 / {{ getLabel('sell_unit',formData?.sellUnit) }}
                </span>
              </template>
            </el-table-column>

            <el-table-column align="center" label="状态">
              <template #default="{row}">
                {{ getLabel('distribute_status', row.rddStatus) }}
              </template>
            </el-table-column>
          </el-table>
        </el-col>
      </template>

      <el-col :span="24" style="margin-top: 20px">
        <item-title title="修改记录" />
      </el-col>

      <el-col :span="24">
        <operation-view :id="id" mode="agent_product_distribute" />
      </el-col>

    </el-row>

  </el-form>
</template>

<script>
import { getCurrentInstance, inject, onMounted, reactive, toRefs } from "vue";
import { useRoute, useRouter } from "vue-router";

export default {
  props: {
    id: {
      type: Number,
      default: 0,
    },
  },
  setup(props, context) {
    const api = inject("api");
    const router = useRouter();
    const route = useRoute();
    const currentInstance = getCurrentInstance();
    const data = reactive({
      tableData: [],
      formData: null,
    });

    const handlDetails = async () => {
      let res = await api.marketingMatching.REGIONAL_DISTRIBUTION_DETAILS(
        props.id
      );
      if (res.code === 0) {
        data.formData = res.data;
      }
    };

    onMounted(() => {
      handlDetails();
    });

    return {
      ...toRefs(data),
    };
  },
};
</script>

<style lang="scss" scoped>
</style>